<template>
	<view class="statistics-page">
		<Duration :title="title" :totalDuration="totalDuration"/>
		<view class="app-sort">
			<view class="title"> 应用排行</view>
			<view class="sort-action" @click="sort">
				<view class="tips">按时间从长到短</view>
				<icon type="/static/icon/sort.png" size="20" />
			</view>
		</view>
		<RankList :statisticsData="data" />
	</view>
</template>

<script setup lang="ts">
	import { computed} from 'vue'
	import Duration from '@/components/duration/index.vue';
	import RankList from '@/components/rankList/index.vue';
	const props = defineProps({
		sort: {
			type: String,
			required: false,
			default: "des" // asc: 升序 des:  降序
		},
		title:{
			type:String
		},
		statisticsData:{
			type: Array,
			required: true
		}
	})
	
	
	// 升序或者降序排列 descending: false 升序 descending: true 降序
	function sortArrayByUseTime(arr, descending = false) {  
	  // 使用数组的 sort 方法进行排序  
	  // 根据 descending 参数的值决定排序顺序  
	  return arr.sort((a, b) => {  
	    if (descending) {  
	      // 如果需要降序排列  
	      return b.useTime - a.useTime;  
	    } else {  
	      // 否则进行升序排列  
	      return a.useTime - b.useTime;  
	    }  
	  });  
	} 
	
	const data = computed(() => {
		return sortArrayByUseTime(props.statisticsData, props.sort === "des")
	})

	
	function formatDuration(seconds) {  
		const hours = Math.floor(seconds / 3600); // 计算小时数  
		const remainingSeconds = seconds % 3600; // 计算剩余秒数（小于3600秒）  
		const minutes = Math.floor(remainingSeconds / 60); // 计算剩余分钟数  
		const remainingSecondsAfterMinutes = remainingSeconds % 60; // 计算剩余秒数（小于60秒）  
	  
		// 使用模板字符串返回格式化的时间  
		if (hours > 0) {  
			// 如果小时数大于0，则输出“X小时Y分钟Z秒”  
			return `${hours}小时${minutes}分钟${remainingSecondsAfterMinutes}秒`;  
		} else if (minutes > 0) {  
			// 如果小时数为0但分钟数大于0，则输出“Y分钟Z秒”  
			return `${minutes}分钟${remainingSecondsAfterMinutes}秒`;  
		} else {  
			// 如果小时数和分钟数都为0，则只输出秒数  
			return `${remainingSecondsAfterMinutes}秒`;  
		}  
	}   
	const totalDuration = computed(() => {
		if(props?.statisticsData && Array.isArray(props.statisticsData)){
			if(props.statisticsData.length === 0){
				return "--"
			} else {
				const time = props.statisticsData.reduce((p:any,n:any) => p += Number(n.useTime), 0)
				return formatDuration(time);
			}
		} else {
			return "--"
		}
	})
	
	const emits = defineEmits(['sortByUseTime'])
	// 按使用时间排序排序
	const sort = () => {
		emits('sortByUseTime')
	}
	
</script>

<style scoped lang="scss">
	.statistics-page{
		border-radius: 15upx;
		padding: 26upx 17upx;
		background: #fff;
		border-radius: 16px 16px 0px 0px;
		.app-sort{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20upx;
			.title{
				font-weight: 800;
				font-size: 32upx;
				color: #333333;
			}
			.sort-action{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				background: #f7fbfe;
				border-radius: 20upx;
				border: 1px solid #FFFFFF;
				padding: 5upx 15upx;
				
				.tips{
					font-weight: 400;
					font-size: 28upx;
					color: $blue-theme;
					margin-right: 10upx;
				}
			}
		}
	}
	
</style>